<template>
  <div class="setter-wrapper">
    <template v-if="currentEditOne !== null && currentEditMeta?.title">
      <div class="setter-title">{{ currentEditMeta?.title || '' }}</div>
      <SetterField
        class="question-config-form"
        :form-config-list="formConfigList"
        :module-config="moduleConfig"
        @form-change="handleFormChange"
      />
    </template>
    <div class="no-select-question1" v-else>
      <SkinSetterPanel />
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useStore } from 'vuex'

import SetterField from '@/management/pages/edit/components/SetterField.vue'
import SkinSetterPanel from '@/management/pages/edit/modules/settingModule/skin/SetterPanel.vue'

const store = useStore()

const currentEditOne = computed(() => store.state?.editform?.currentEditOne)
const formConfigList = computed(() => store.getters['editform/formConfigList'])
const moduleConfig = computed(() => store.getters['editform/moduleConfig'])
const currentEditKey = computed(() => store.getters['editform/currentEditKey'])
const currentEditMeta = computed(() => store.getters['editform/currentEditMeta'])

// console.log('currentEditOne', currentEditOne.value)
const handleFormChange = (data: any) => {
  const { key, value } = data
  const resultKey = `${currentEditKey.value}.${key}`
  store.dispatch('editform/changeSchema', { key: resultKey, value })
}
</script>
<style lang="scss" scoped>
.setter-wrapper {
  width: 360px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #fff;
}

.setter-title {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: $primary-color;
  padding-left: 20px;
  border-bottom: 1px solid #edeffc;
}

.no-select-question {
  padding-top: 125px;
  display: flex;
  flex-direction: column;
  align-items: center;

  img {
    width: 160px;
    padding: 25px;
  }

  .tip {
    font-size: 14px;
    color: $normal-color;
    letter-spacing: 0;
  }
}

.question-config-form {
  padding: 30px 20px 50px 20px;
}
</style>
